<template>
    <TabGrayEasyCard v-if="card.curTab == '车牌'" :title="'异常抬杆'" @onMore="goDetail(props.permi)" :tabs="card.tabs"
        :curTab="card.curTab" :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList"
        :lineText="''" :barText="''" :unitText="`单位：${card.unitText}`" :updateText="card.updateText"
        v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">

        <slot>
            <!-- :cell-class-name="getCellClassName" -->
            <el-table :data="card.tableData" height="100%">
                <el-table-column label="车牌号" prop="carNo" :align="'left'" min-width="90" show-overflow-tooltip />
                <el-table-column label="异常次数" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.abnormalAmount) }}
                    </template>
                </el-table-column>
                <el-table-column label="计费时长" prop="parkHours" :align="'center'" min-width="90" show-overflow-tooltip />
                <el-table-column label="异常费用" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.abnormalCost) }}
                    </template>
                </el-table-column>
            </el-table>
        </slot>
    </TabGrayEasyCard>

    <TabGrayBarLineCard v-if="card.curTab == '月度'" :title="'异常抬杆'" @onMore="goDetail(props.permi)" :tabs="card.tabs"
        :curTab="card.curTab" :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList"
        :echartId="`myEChartsBarLine-${props.permi}-abnormalPoleLifting`" :echartData="card.echartData" :lineText="'上年'"
        :barText="'本年'" :unitText="``" :updateText="card.updateText"
        v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
    </TabGrayBarLineCard>
</template>

<script setup>
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import TabGrayBarLineCard from '@/DbComponents/tabGrayBarLineCard'
import { toThousands } from '@/utils/number-util'
// import dashBoardApi from '@/api/Manage/Business/dashBoard'
import { abnormalCardApi, abnormalFormApi, abnormalChartApi } from '@/api/Manage/Business/dashBoard'
import { reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
let { updateDate, tabPermi } = route.query
const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    biProjectCode: {
        type: String,
        required: false,
        default: ''
    }
})
const grayCardListCar = [{ label: '异常次数', value: '', unit: '次', color: '' }, { label: '异常费用', value: '', unit: '元', color: '' }]
const grayCardListMonth = [{ label: '当月累计', value: '', unit: '次', color: '' }, { label: '异常费用', value: '', unit: '元', color: '' }]
const card = reactive(
    {
        tabs: [{ label: '车牌', value: '车牌' }, { label: '月度', value: '月度' }],
        curTab: '车牌',
        tabRight: '',
        grayCardList: grayCardListCar,
        unitText: '次；元',
        updateText: '',
        tableData: [],
        echartData: {},
        // startDate: '',
        // endDate: '',
    }
)
const getCardData = () => {
    abnormalCardApi({ dataType: card.curTab, projectCode: props.biProjectCode }).then((res) => {
        if (res.data.errorCode == 200) {
            card.grayCardList[0].value = toThousands(res.data.data.abnormalAmount)
            card.grayCardList[1].value = toThousands(res.data.data.abnormalCost)
        }
    }).catch(err => {
        console.log(err)
    });
}

const getFormData = () => {
    abnormalFormApi({ projectCode: props.biProjectCode }).then((res) => {
        if (res.data.errorCode == 200) {
            card.tableData = res.data.data
            // card.unitText = res.data.data[0].valueUnit
        }
    }).catch(err => {
        console.log(err)
    });
}

const getChartData = () => {
    abnormalChartApi({ projectCode: props.biProjectCode }).then((res) => {
        if (res.data.code == 200) {
            card.echartData = res.data.data
        }
    }).catch(err => {
        console.log(err)
    });
}

const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })

    let rid = card.curTab == '车牌' ? 'Manage/Business/abnormalPoleLifting/carDetail' : 'Manage/Business/abnormalPoleLifting/monthDetail'

    router.push({
        path: '/page/routeController/index',
        query: {
            rid: rid,
            rTitle: `异常抬杆明细-${card.curTab}`,
            biProjectCode: props.biProjectCode,
            dataTime: updateDate,
            resourceKey: tabPermi,
        },
    })
}
const changeTab = (value) => {
    // 切换tab
    card.curTab = value
    getCardData()
    if (value == '车牌') {
        card.grayCardList = grayCardListCar
        getFormData()
    }
    if (value == '月度') {
        card.grayCardList = grayCardListMonth
        getChartData()
    }
}

const biProjectCode = computed(() => {
    return props.biProjectCode
});
watch(biProjectCode, () => {
    getCardData()
    getFormData()
}, { deep: true, immediate: true });
</script>

<style scoped lang="scss"></style>
